<template>
    <div class="home-container">
        <nav-list :clickIndex="1"></nav-list>

        <!-- <div class="middle">
            <div class="con_div">
                <div class="con_div_text01">
                    <p class="title">总会员数</p>
                    <p class="org" :class="scrollView ? 'org-up' : 'org-down'">
                        {{ indexObj.usercount }}
                    </p>
                </div>
                <div class="con_div_text01 hover-text" @click="clickData(1)">
                    <p class="title">今日新增会员总数</p>
                    <p class="org" :class="scrollView ? 'org-up' : 'org-down'">
                        {{ indexObj.todayusercount }}
                    </p>
                </div>
                <div class="con_div_text01 hover-text" @click="clickData(2)">
                    <p class="title">本周新增会员总数</p>
                    <p class="org">{{ indexObj.weekusercount }}</p>
                </div>
                <div class="con_div_text01 hover-text" @click="clickData(3)">
                    <p class="title">本月新增会员总数</p>
                    <p class="org">{{ indexObj.monthusercount }}</p>
                </div>
                <div
                    class="con_div_text01 hover-text"
                    @click="
                        page.currentPage = 1;
                        getsignlist(page, 1);
                    "
                >
                    <p class="title">今日签到总数</p>
                    <p class="org">{{ indexObj.todayusersigncount }}</p>
                </div>
                <div
                    class="con_div_text01 hover-text"
                    @click="
                        page.currentPage = 1;
                        getsignlist(page, 2);
                    "
                >
                    <p class="title">本周签到总数</p>
                    <p class="org">{{ indexObj.weekusersigncount }}</p>
                </div>
            </div>
        </div> -->
        <div class="home-content" style="padding: 40px 15px;">
            <div class="div_any02">
                <div class="div_any_child div_height">
                    <div class="div_any_title any_title_width">
                        <img
                            src="../../assets/images/title_0.png"
                        />全国发货数分布图
                    </div>
                    <div
                        id="mapChart"
                        ref="mapChart"
                        v-loading="loading"
                        element-loading-text="地图正在生成中"
                        element-loading-spinner="el-icon-loading"
                        element-loading-background="rgba(0, 0, 0, 0.1)"
                        style="
                            width: 97.5%;
                            height: 100%;
                            display: inline-block;
                            padding-left: 1.25%;
                            padding-top: 2.2%;
                        "
                    ></div>
                    <!-- <div class="city-data">
                        <div
                            v-for="(item, index) in topData"
                            :key="index"
                            class="city-style"
                        >
                            <span style="color: #fff">{{ item.name }}：</span
                            ><span style="color: #ffff43">{{
                                item.value[2]
                            }}</span>
                        </div>
                    </div> -->
                </div>
            </div>
            <div class="div_any02">
                <div class="div_any_child" style="height: 700px">
                    <div class="div_any_title any_title_width">省排行榜</div>
                    <!-- <div class="date-picker">
                        <el-date-picker
                            v-model="selectDate"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            value-format="yyyy-MM-dd"
                            @change="changeVip"
                            :picker-options="pickerOptions"
                            size="small"
                        >
                        </el-date-picker>
                    </div> -->
                    <div
                        id="lineVip"
                        v-loading="loading"
                        element-loading-text="加载中..."
                        element-loading-spinner="el-icon-loading"
                        element-loading-background="rgba(0, 0, 0, 0.1)"
                        style="
                            width: 97.5%;
                            height: 90%;
                            display: inline-block;
                            padding-left: 1.25%;
                            padding-top: 2.2%;
                        "
                    ></div>
                </div>
                <!-- <div
                    class="div_any_child"
                    style="height: 335px; margin-top: 15px"
                >
                    <div>
                        <div class="table-header">
                            <el-row :gutter="20">
                                <el-col :span="6">
                                    <div class="grid-content username">
                                        用户
                                    </div>
                                </el-col>
                                <el-col :span="3">
                                    <div class="grid-content typeName">
                                        <div class="grid-content mName">
                                            平台
                                        </div>
                                    </div>
                                </el-col>
                                <el-col :span="7">
                                    <div class="grid-content mName">事件</div>
                                </el-col>
                                <el-col :span="8">
                                    <div class="grid-content mName">
                                        点击时间
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                        <seamlessScroll
                            v-if="analysedata.length > 0"
                            :analysedata="analysedata"
                        ></seamlessScroll>
                    </div>
                </div> -->
            </div>
        </div>
        <el-dialog width="80%" :visible.sync="dialogTableVisible">
            <avue-crud
                :page.sync="page"
                :data="tableData"
                :option="tableOption2"
                :table-loading="tableLoading"
                :header-cell-class-name="headerCell"
                :row-class-name="rowCell"
                @on-load="getPage"
                ref="crud"
            >
            </avue-crud>
        </el-dialog>
        <el-dialog width="80%" :visible.sync="dialogTableVisible2">
            <el-date-picker
                v-model="pickerTime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="changePicker"
                :picker-options="pickerOptions2"
                size="small"
            >
            </el-date-picker>
            <div id="lineChart" style="width: 100%; height: 500px"></div>
        </el-dialog>
        <el-dialog width="80%" :visible.sync="dialogTableVisible3">
            <avue-crud
                :page.sync="page"
                :data="tableData"
                :option="tableOption5"
                :table-loading="tableLoading"
                :header-cell-class-name="headerCell"
                :row-class-name="rowCell"
                @on-load="getsignlist"
                ref="crud"
            >
            </avue-crud>
        </el-dialog>
        <el-dialog
            width="1200px"
            :visible.sync="dialogTableVisible4"
            @opened="nextGetProvincialData"
        >
            <div class="sheng-list">
                <div>
                    <div class="title" style="color: #fff">
                        {{ lineVip2Name }}
                    </div>
                    <div
                        id="lineVip2"
                        v-loading="tableLoading"
                        element-loading-text="加载中..."
                        element-loading-spinner="el-icon-loading"
                        element-loading-background="rgba(0, 0, 0, 0.1)"
                        style="
                            width: 650px;
                            height: 400px;
                            display: inline-block;
                        "
                    ></div>
                </div>

                <div
                    class="jxs-list"
                    v-loading="tableLoading2"
                    element-loading-text="加载中..."
                    element-loading-spinner="el-icon-loading"
                    element-loading-background="#081832"
                >
                    <div
                        v-show="!dealerShow"
                        class="title"
                        @click="getProvincialData"
                    >
                        <i class="el-icon-arrow-left"></i> 返回
                    </div>
                    <el-table
                        :data="dealerList"
                        style="width: 100%; position: absolute;top: 15px;"
                        :style="{ zIndex: dealerShow ? '10' : '0' }"
                        height="390px"
                        @row-click="rowClick"
                    >
                        <el-table-column prop="name" label="经销商" width="231">
                            <template slot-scope="scope">
                                <div style="cursor: pointer">
                                    {{ scope.row.dealer_name }}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="all_delivery"
                            label="发货数"
                            width="62"
                            align="center"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="all_lottery"
                            label="抽奖数"
                            width="62"
                            align="center"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="lottery_ratio"
                            label="比例"
                            width="75"
                            align="center"
                        >
                        </el-table-column>
                        <el-table-column label="门店" width="50" align="center">
                            <template slot-scope="scope">
                                <div
                                    style="cursor: pointer"
                                    @click="clickLookDealer(scope.row)"
                                >
                                    <span
                                        style="color: #409eff; font-size: 12px"
                                        >查看</span
                                    >
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-table
                        :data="storeList"
                        style="width: 100%; position: absolute;top: 15px;"
                        :style="{ zIndex: dealerShow ? '0' : '10' }"
                        height="390px"
                        @row-click="rowClick"
                    >
                        <el-table-column prop="name" label="经销商" width="281">
                            <template slot-scope="scope">
                                <div style="cursor: pointer">
                                    {{ scope.row.store_name }}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="all_delivery"
                            label="发货数"
                            width="62"
                            align="center"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="all_lottery"
                            label="抽奖数"
                            width="62"
                            align="center"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="lottery_ratio"
                            label="比例"
                            width="75"
                            align="center"
                        >
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import {
    getScreenIndex,
    getPageIndex,
    getMapIndex,
    getUserData,
    getVipNum,
    getiptoprovince,
    province_summary,
    store_summary,
    dealer_summary,
} from "@/api/homeIndex/homeIndex";
import { getsignlist, getallanalysedata } from "@/api/inviteIndex/inviteIndex";
import "echarts/extension/bmap/bmap";
import {
    tableOption2,
    tableOption3,
    tableOption5,
} from "@/const/inviteIndex/inviteIndex";

import china from "@/assets/json/china.json";

import seamlessScroll from "@/components/seamlessScroll.vue";

import Provincia11 from "@/assets/json/geometryProvince/11.json";
import Provincia12 from "@/assets/json/geometryProvince/12.json";
import Provincia13 from "@/assets/json/geometryProvince/13.json";
import Provincia14 from "@/assets/json/geometryProvince/14.json";
import Provincia15 from "@/assets/json/geometryProvince/15.json";
import Provincia21 from "@/assets/json/geometryProvince/21.json";
import Provincia22 from "@/assets/json/geometryProvince/22.json";
import Provincia23 from "@/assets/json/geometryProvince/23.json";
import Provincia31 from "@/assets/json/geometryProvince/31.json";
import Provincia32 from "@/assets/json/geometryProvince/32.json";
import Provincia33 from "@/assets/json/geometryProvince/33.json";
import Provincia34 from "@/assets/json/geometryProvince/34.json";
import Provincia35 from "@/assets/json/geometryProvince/35.json";
import Provincia36 from "@/assets/json/geometryProvince/36.json";
import Provincia37 from "@/assets/json/geometryProvince/37.json";
import Provincia41 from "@/assets/json/geometryProvince/41.json";
import Provincia42 from "@/assets/json/geometryProvince/42.json";
import Provincia43 from "@/assets/json/geometryProvince/43.json";
import Provincia44 from "@/assets/json/geometryProvince/44.json";
import Provincia45 from "@/assets/json/geometryProvince/45.json";
import Provincia46 from "@/assets/json/geometryProvince/46.json";
import Provincia50 from "@/assets/json/geometryProvince/50.json";
import Provincia51 from "@/assets/json/geometryProvince/51.json";
import Provincia52 from "@/assets/json/geometryProvince/52.json";
import Provincia53 from "@/assets/json/geometryProvince/53.json";
import Provincia54 from "@/assets/json/geometryProvince/54.json";
import Provincia61 from "@/assets/json/geometryProvince/61.json";
import Provincia62 from "@/assets/json/geometryProvince/62.json";
import Provincia63 from "@/assets/json/geometryProvince/63.json";
import Provincia64 from "@/assets/json/geometryProvince/64.json";
import Provincia65 from "@/assets/json/geometryProvince/65.json";
import Provincia71 from "@/assets/json/geometryProvince/71.json";
import Provincia81 from "@/assets/json/geometryProvince/81.json";
import Provincia82 from "@/assets/json/geometryProvince/82.json";
import navList from "@/components/navList/navList.vue";
export default {
    name: "homeIndex",
    components: {
        seamlessScroll,
        navList,
    },
    data() {
        return {
            mapData: [],
            provinciaList2: [
                "北京",
                "天津",
                "河北",
                "山西",
                "内蒙古",
                "辽宁",
                "吉林",
                "黑龙江",
                "上海",
                "江苏",
                "浙江",
                "安徽",
                "福建",
                "江西",
                "山东",
                "河南",
                "湖北",
                "湖南",
                "广东",
                "广西",
                "海南",
                "重庆",
                "四川",
                "贵州",
                "云南",
                "西藏",
                "陕西",
                "甘肃",
                "青海",
                "宁夏",
                "新疆",
                "台湾",
                "香港",
                "澳门",
            ],
            selectDate: "",
            // 日期时间范围在一个月以内
            pickerOptions: {
                onPick: ({ maxDate, minDate }) => {
                    this.selectDate = minDate.getTime();
                    if (minDate && !maxDate) {
                        this.timeOptionRange = minDate;
                    }
                    if (maxDate) {
                        this.selectDate = "";
                        this.timeOptionRange = null;
                    }
                },
                disabledDate: (time) => {
                    let timeOptionRange = this.timeOptionRange;
                    if (
                        timeOptionRange &&
                        time.getTime() === timeOptionRange.getTime()
                    )
                        return true;
                    if (this.selectDate !== "") {
                        const one = 30 * 24 * 3600 * 1000;
                        const minTime = this.selectDate - one;
                        const maxTime = this.selectDate + one;
                        return (
                            time.getTime() < minTime || time.getTime() > maxTime
                        );
                    }
                },
            },
            // 日期时间范围不在同一天
            pickerOptions2: {
                onPick: ({ maxDate, minDate }) => {
                    if (minDate && !maxDate) {
                        this.timeOptionRange = minDate;
                    }
                    if (maxDate) {
                        this.timeOptionRange = null;
                    }
                },
                disabledDate: (time) => {
                    let timeOptionRange = this.timeOptionRange;
                    if (
                        timeOptionRange &&
                        time.getTime() === timeOptionRange.getTime()
                    )
                        return true;
                },
            },
            dialogTableVisible: false,
            tableData: [],
            tableOption2: tableOption2,
            tableOption3: tableOption3,
            tableOption5: tableOption5,
            provinceList: [],
            countData: [],
            dialogTableVisible2: false,
            dialogTableVisible3: false,
            page: {
                currentPage: 1,
                pageSize: 10,
                total: 100,
            },
            dialogType: 1,
            tableLoading: true,
            navList: [
                {
                    name: "首页",
                    type: 1,
                    img: "../../../public/static/images/nav_1.png",
                },
                {
                    name: "活跃分析",
                    type: 4,
                    img: "../../../public/static/images/nav_3.png",
                },
                {
                    name: "行为分析",
                    type: 5,
                    img: "../../../public/static/images/nav_3.png",
                },
                {
                    name: "小竹叶分析",
                    type: 3,
                    img: "../../../public/static/images/nav_3.png",
                },
                {
                    name: "邀请排行榜",
                    type: 2,
                    img: "../../../public/static/images/nav_3.png",
                },
                {
                    name: "问答分析",
                    type: 6,
                    img: "../../../public/static/images/nav_3.png",
                },
                // {
                //   name: '首页2',
                //   type: 3,
                //   img: '../../../public/static/images/nav_3.png'
                // }
            ],
            clickIndex: 1,
            echartOption: {
                color: ["#4DA1FF", "#A8DE96", "#FFB129"],
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        // 坐标轴指示器，坐标轴触发有效
                        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
                    },
                },
                legend: {
                    data: ["PC", "App", "小程序"],
                    textStyle: {
                        color: "#fff",
                    },
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true,
                },
                xAxis: [
                    {
                        type: "category",
                        data: [],
                        axisTick: {
                            alignWithLabel: true,
                        },
                        axisLabel: {
                            show: true,
                            interval: 0,
                            rotate: 40,
                            textStyle: {
                                color: "#fff",
                            },
                        },
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                        axisLabel: {
                            textStyle: {
                                color: "#fff",
                            },
                        },
                    },
                ],
                series: [
                    {
                        name: "PC",
                        type: "bar",
                        data: [],
                    },
                    {
                        name: "App",
                        type: "bar",
                        data: [],
                    },
                    {
                        name: "小程序",
                        type: "bar",
                        data: [],
                    },
                ],
            },
            mapOption: {
                bmap: {
                    center: [117.27, 31.86],
                    zoom: 5,
                    roam: true,
                    mapStyle: {
                        styleJson: [
                            {
                                featureType: "water",
                                elementType: "all",
                                stylers: {
                                    color: "#044161",
                                },
                            },
                            {
                                featureType: "land",
                                elementType: "all",
                                stylers: {
                                    color: "#004981",
                                },
                            },
                            {
                                featureType: "boundary",
                                elementType: "geometry",
                                stylers: {
                                    color: "#064f85",
                                },
                            },
                            {
                                featureType: "railway",
                                elementType: "all",
                                stylers: {
                                    visibility: "off",
                                },
                            },
                            {
                                featureType: "highway",
                                elementType: "geometry",
                                stylers: {
                                    color: "#004981",
                                },
                            },
                            {
                                featureType: "highway",
                                elementType: "geometry.fill",
                                stylers: {
                                    color: "#005b96",
                                    lightness: 1,
                                },
                            },
                            {
                                featureType: "highway",
                                elementType: "labels",
                                stylers: {
                                    visibility: "off",
                                },
                            },
                            {
                                featureType: "arterial",
                                elementType: "geometry",
                                stylers: {
                                    color: "#004981",
                                },
                            },
                            {
                                featureType: "arterial",
                                elementType: "geometry.fill",
                                stylers: {
                                    color: "#00508b",
                                },
                            },
                            {
                                featureType: "poi",
                                elementType: "all",
                                stylers: {
                                    visibility: "off",
                                },
                            },
                            {
                                featureType: "green",
                                elementType: "all",
                                stylers: {
                                    color: "#056197",
                                    visibility: "off",
                                },
                            },
                            {
                                featureType: "subway",
                                elementType: "all",
                                stylers: {
                                    visibility: "off",
                                },
                            },
                            {
                                featureType: "manmade",
                                elementType: "all",
                                stylers: {
                                    visibility: "off",
                                },
                            },
                            {
                                featureType: "local",
                                elementType: "all",
                                stylers: {
                                    visibility: "off",
                                },
                            },
                            {
                                featureType: "arterial",
                                elementType: "labels",
                                stylers: {
                                    visibility: "off",
                                },
                            },
                            {
                                featureType: "boundary",
                                elementType: "geometry.fill",
                                stylers: {
                                    color: "#029fd4",
                                },
                            },
                            {
                                featureType: "building",
                                elementType: "all",
                                stylers: {
                                    color: "#1a5787",
                                },
                            },
                            {
                                featureType: "label",
                                elementType: "all",
                                stylers: {
                                    visibility: "off",
                                },
                            },
                        ],
                    },
                },
                tooltip: {
                    trigger: "item",
                    showDelay: 0,
                    transitionDuration: 0.2,
                },
                series: [
                    {
                        type: "scatter",
                        coordinateSystem: "bmap",
                        data: [],
                        encode: {
                            value: 2,
                        },
                        symbolSize: 10,
                        label: {
                            formatter: "{b}",
                            position: "right",
                        },
                        itemStyle: {
                            color: "#ddb926",
                        },
                        projection: {
                            project: function (point) {
                                console.log(point);
                                return projection(point);
                            },
                            unproject: function (point) {
                                console.log(point);
                                return projection.invert(point);
                            },
                        },
                        emphasis: {
                            label: {
                                show: true,
                            },
                        },
                    },
                    {
                        type: "effectScatter",
                        coordinateSystem: "bmap",
                        data: [],
                        encode: {
                            value: 2,
                        },
                        symbolSize: 30,
                        showEffectOn: "emphasis",
                        rippleEffect: {
                            brushType: "stroke",
                        },
                        hoverAnimation: true,
                        label: {
                            formatter: "{b}",
                            position: "right",
                            show: true,
                        },
                        itemStyle: {
                            color: "#f4e925",
                            shadowBlur: 10,
                            shadowColor: "#333",
                        },
                        zlevel: 1,
                    },
                ],
            },
            indexObj: {},
            pickerTime: "",
            loading: true,
            topData: [],
            dataType: "",
            scrollView: false,
            lineOpiton: {
                title: {
                    text: "",
                },
                tooltip: {
                    trigger: "axis",
                },
                legend: {
                    data: ["发货数", "抽奖数"],
                    textStyle: {
                        color: "#fff",
                    },
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true,
                },
                // toolbox: {
                //   feature: {
                //     saveAsImage: {}
                //   }
                // },
                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    data: [
                        "一月",
                        "二月",
                        "三月",
                        "四月",
                        "五月",
                        "六月",
                        "七月",
                        "八月",
                        "九月",
                        "十月",
                        "十一月",
                        "十二月",
                    ],
                    axisLabel: {
                        textStyle: {
                            color: "#fff",
                        },
                    },
                },
                yAxis: {
                    type: "value",
                    axisLabel: {
                        textStyle: {
                            color: "#fff",
                        },
                    },
                },
                series: [
                    {
                        name: "发货数",
                        type: "line",
                        stack: "Total",
                        data: [],
                    },
                    {
                        name: "抽奖数",
                        type: "line",
                        stack: "App",
                        data: [],
                    },
                ],
            },

            // 型地图
            myChart: null,

            mapProvinciaShow: true,
            myChartProvincia: null,
            dialogTableVisible4: false,
            selectProvincia: {},

            provinciaList: {
                北京: Provincia11,
                天津: Provincia12,
                河北: Provincia13,
                山西: Provincia14,
                内蒙古: Provincia15,
                辽宁: Provincia21,
                吉林: Provincia22,
                黑龙江: Provincia23,
                上海: Provincia31,
                江苏: Provincia32,
                浙江: Provincia33,
                安徽: Provincia34,
                福建: Provincia35,
                江西: Provincia36,
                山东: Provincia37,
                河南: Provincia41,
                湖北: Provincia42,
                湖南: Provincia43,
                广东: Provincia44,
                广西: Provincia45,
                海南: Provincia46,
                重庆: Provincia50,
                四川: Provincia51,
                贵州: Provincia52,
                云南: Provincia53,
                西藏: Provincia54,
                陕西: Provincia61,
                甘肃: Provincia62,
                青海: Provincia63,
                宁夏: Provincia64,
                新疆: Provincia65,
                台湾: Provincia71,
                香港: Provincia81,
                澳门: Provincia82,
            },

            // 用户行为数据
            analysedata: [],
            analysPage: 1,
            analysTotal: 0,

            // 经销商数据
            dealerList: [],
            tableLoading2: false,
            lineVip2Name: "",
            dealerShow: true,
            storeList: [],
        };
    },
    watch: {},
    created() {
        // this.getIndex();
        let startDate = this.$moment().format("YYYY-MM-DD");
        let endDate = this.$moment().add(1, "days").format("YYYY-MM-DD");
        let monDate = this.$moment().subtract(1, "months").format("YYYY-MM-DD");
        this.pickerTime = [startDate, endDate];
        this.selectDate = [monDate, startDate];
    },
    mounted() {
        // this.getallanalysedata();
        this.$nextTick(() => {
            this.getMap();
        });
        // this.getWebSocket();
    },
    props: [],
    methods: {
        // 获取滚动文字数据
        getallanalysedata() {
            getallanalysedata().then((res) => {
                if (res.data.code == 1) {
                    // this.analysTotal = res.data.data[0].all_count;
                    // if (this.analysedata.length > 39) {
                    //     this.analysedata.splice(0, 10);
                    //     console.log(this.analysedata);
                    // }
                    for (let item of res.data.data) {
                        let typeName = "";
                        if (item.type == 1) typeName = "PC端";
                        else if (item.type == 2) typeName = "APP端";
                        else if (item.type == 3) typeName = "小程序";
                        let m_idName = "";
                        if (item.m_id == 1) m_idName = "问题库";
                        else if (item.m_id == 2) m_idName = "税收法规库";
                        else if (item.m_id == 3) m_idName = "会计法规库";
                        else if (item.m_id == 4) m_idName = "优惠政策";
                        else if (item.m_id == 5) m_idName = "模板专区";
                        else if (item.m_id == 6) m_idName = "发票助手";
                        else if (item.m_id == 7) m_idName = "小竹资讯";
                        else if (item.m_id == 8) m_idName = "小竹学院";
                        else if (item.m_id == 9) m_idName = "小竹企服";
                        else if (item.m_id == 10) m_idName = "小竹问答";
                        this.analysedata.push({
                            typeName: typeName,
                            mName: m_idName,
                            username: item.username,
                            date: item.createtime_text,
                        });
                    }

                    // setTimeout(() => {
                    //     if (
                    //         this.analysPage < Math.ceil(this.analysTotal / 10)
                    //     ) {
                    //         this.analysPage += 1;
                    //         this.getallanalysedata();
                    //     }
                    // }, 8000);
                }
            });
        },

        // 型地图初始化
        initEchartMap() {
            console.log("chinachinachina", china);
            this.$echarts.registerMap("china", china);
            this.myChart = this.$echarts.init(this.$refs.mapChart, null, {
                renderer: "svg",
            });
            this.myChart.off("click");

            //echart 配制option
            var options = {
                tooltip: {
                    triggerOn: "mousemove", //mousemove、click
                    padding: 8,
                    borderWidth: 1,
                    borderColor: "#409eff",
                    backgroundColor: "rgba(255,255,255,0.7)",
                    textStyle: {
                        color: "#000000",
                        fontSize: 13,
                    },
                    formatter: function (e, t, n) {
                        let data = e.data;
                        let context = `
                            <div>
                                <p><b style="font-size:15px;">${data.name}</b></p>
                                <p class="tooltip_style"><span class="tooltip_left">总发货数：</span><span class="tooltip_right">${data.value}</span></p>
                                <p class="tooltip_style"><span class="tooltip_left">总抽奖数：</span><span class="tooltip_right">${data.value2}</span></p>
                                <p class="tooltip_style"><span class="tooltip_left">抽奖比例：</span><span class="tooltip_right">${data.value3}</span></p>
                            </div>
                            `;
                        return context;
                    },
                },
                visualMap: {
                    show: true,
                    left: 26,
                    bottom: 40,
                    showLabel: true,
                    textStyle: {
                        color: "#ffffff",
                    },
                    pieces: [
                        {
                            gte: 5000,
                            label: ">= 5000",
                            color: "#070093",
                        },
                        {
                            gte: 3000,
                            lt: 4999,
                            label: "3000 - 4999",
                            color: "#1c3fbf",
                        },
                        {
                            gte: 2000,
                            lt: 2999,
                            label: "2000 - 2999",
                            color: "#116fc4",
                        },
                        {
                            gte: 1000,
                            lt: 1999,
                            label: "1000 - 1999",
                            color: "#1482e5",
                        },
                        {
                            gte: 100,
                            lt: 999,
                            label: "100 - 999",
                            color: "#70b4eb",
                        },
                        {
                            gte: 10,
                            lt: 99,
                            label: "10 - 99",
                            color: "#b4e0f3",
                        },
                        {
                            lt: 10,
                            label: "<10",
                            color: "#ffffff",
                        },
                    ],
                },
                geo: {
                    map: "china",
                    scaleLimit: {
                        min: 1,
                        max: 2,
                    },
                    zoom: 1,
                    top: 60,
                    layoutSize: "100%", //保持地图宽高比
                    label: {
                        normal: {
                            show: false,
                            fontSize: "12",
                            color: "rgba(0,0,0,0)",
                        },
                        emphasis: {
                            show: true,
                            position: "inside",
                            textStyle: {
                                color: "rgba(144,1,34,1)",
                            },
                        },
                    },
                    itemStyle: {
                        normal: {
                            //shadowBlur: 50,
                            //shadowColor: 'rgba(0, 0, 0, 0.2)',
                            borderColor: "rgba(0, 0, 0, 0.2)",
                            areaColor: "#1955a4",
                        },
                        emphasis: {
                            areaColor: "#f2d5ad",
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                            borderWidth: 0,
                        },
                    },
                },
                series: [
                    {
                        name: "成果预览",
                        type: "map",
                        geoIndex: 0,
                        data: this.topData,
                    },
                ],
            };

            this.myChart.clear();
            this.myChart.setOption(options);
            this.myChart.resize();
            let that = this;
            //地图的点击事件 ，钻取到市我就不举例了，类似的方法，点击事件可以获取到当前点击的省份的数据；
            this.myChart.on("click", function (params) {
                if (params.data.value != 0) {
                    that.dialogTableVisible4 = true;
                    that.selectProvincia = params;
                    that.mapProvinciaShow = true;
                    that.tableLoading2 = true;
                }
            });

            this.loading = false;

            // document.getElementById("mapChart")
        },

        nextGetProvincialData() {
            this.$nextTick(() => {
                this.getProvincialData();
            });
        },

        closeMap() {
            this.mapProvinciaShow = false;
        },

        // 获取省一级数据
        getProvincialData() {
            console.log("获取省级数据，展示在弹窗上");
            this.tableLoading = true;
            this.dealerShow = true;
            let pData = null;

            for (let item of this.mapData) {
                if (item.province == this.selectProvincia.name) {
                    pData = item;
                }
            }

            if (pData) {
                let fahuoL = [];
                let choujiangL = [];
                for (let i = 1; i <= 12; i++) {
                    fahuoL.push(pData["delivery" + i]);
                    choujiangL.push(pData["lottery" + i]);
                }
                this.lineOpiton.series[0].data = fahuoL;
                this.lineOpiton.series[1].data = choujiangL;
                this.$echarts
                    .init(document.getElementById("lineVip2"))
                    .setOption(this.lineOpiton);
                this.lineVip2Name = pData.name;
                this.tableLoading = false;
            }
            console.log(pData.name);
            dealer_summary({
                page: 1,
                pagesize: 1000,
                province: pData.name,
            }).then((res) => {
                console.log(res.data);
                this.dealerList = res.data.data;

                this.tableLoading2 = false;
            });
            this.tableLoading = false;
        },

        rowClick(row, column, event) {
            let fahuoL = [];
            let choujiangL = [];
            for (let i = 1; i <= 12; i++) {
                fahuoL.push(row["delivery" + i]);
                choujiangL.push(row["lottery" + i]);
            }
            this.lineOpiton.series[0].data = fahuoL;
            this.lineOpiton.series[1].data = choujiangL;
            if (!row.store_name) this.lineVip2Name = row.dealer_name;
            else this.lineVip2Name = row.store_name;
            this.$echarts
                .init(document.getElementById("lineVip2"))
                .setOption(this.lineOpiton);
        },

        clickLookDealer(row) {
            this.dealerShow = false;
            console.log(row);
            store_summary({
                page: 1,
                pagesize: 1000,
                dealer_name: row.dealer_name,
            }).then((res) => {
                console.log(res.data.data);
                this.storeList = res.data.data;
            });
        },

        clickData(type) {
            this.dataType = type;
            this.dialogTableVisible = true;
            let params = {
                type: type,
            };
            this.getPage(this.page, params);
        },

        getPage(page, params) {
            this.tableLoading = true;
            let obj = {
                type: this.dataType,
                page: page.currentPage,
                pagesize: page.pageSize,
            };

            getUserData(obj).then((res) => {
                this.tableData = res.data.data;
                this.page.total = res.data.data[0].all_count;
                this.tableLoading = false;
            });
        },

        // 获取签到列表
        getsignlist(page, type = null) {
            this.dialogTableVisible3 = true;
            this.tableLoading = true;
            if (type) this.dialogType = type;
            let obj = {
                page: page.currentPage,
                pagesize: page.pageSize,
                type: this.dialogType,
            };
            getsignlist(obj).then((res) => {
                this.tableData = res.data.data;
                this.page.total = res.data.data[0].all_count;
                this.tableLoading = false;
            });
        },

        //获取总会员数折线图
        openDialog() {
            this.dialogTableVisible2 = true;
            this.$nextTick(() => {
                this.getPageClick();
            });
        },

        getCount() {
            let option = {
                title: {
                    text: "",
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                },
                legend: {
                    data: ["总发货数", "总抽奖数"],
                    textStyle: {
                        color: "#fff",
                    },
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true,
                },
                xAxis: {
                    type: "value",
                    boundaryGap: [0, 0.01],
                    axisLabel: {
                        textStyle: {
                            color: "#fff",
                        },
                    },
                },
                yAxis: {
                    min: 15,
                    type: "category",
                    data: [],
                },
                series: [
                    {
                        name: "总发货数",
                        type: "bar",
                        data: [],
                    },
                    {
                        name: "总抽奖数",
                        type: "bar",
                        data: [],
                    },
                ],
            };
            this.mapData.sort(
                (a, b) =>
                    a.all_delivery +
                    a.all_lottery -
                    (b.all_delivery + b.all_lottery)
            );
            let yAxisData = [];
            let seriesData1 = [];
            let seriesData2 = [];

            for (let item of this.mapData) {
                if (item.all_delivery > 0) {
                    yAxisData.push(item.province);
                    seriesData1.push(item.all_delivery);
                    seriesData2.push(item.all_lottery);
                }
            }
            option.yAxis.min = yAxisData.length - 10;
            option.yAxis.data = yAxisData;
            option.series[0].data = seriesData1;
            option.series[1].data = seriesData2;
            this.$echarts
                .init(document.getElementById("lineVip"))
                .setOption(option);
        },

        //改变总会员数的日期渲染
        changeVip(e) {
            // let obj = {
            //     start_date: e[0],
            //     end_date: e[1],
            // };
            // getVipNum(obj).then((res) => {
            //     console.log(res);
            //     let xData = [];
            //     let pcData = [];
            //     let mData = [];
            //     let appletData = [];
            //     let codeData = [];
            //     res.data.data.forEach((val) => {
            //         xData.push(val.date);
            //         pcData.push(val.pc);
            //         mData.push(val.m);
            //         appletData.push(val.applet);
            //         codeData.push(val.pc_scan);
            //     });
            //     this.lineOpiton.xAxis.data = xData;
            //     this.lineOpiton.series[0].data = pcData;
            //     this.lineOpiton.series[1].data = mData;
            //     this.lineOpiton.series[2].data = appletData;
            //     this.lineOpiton.series[3].data = codeData;
            //     this.$echarts
            //         .init(document.getElementById("lineVip"))
            //         .setOption(this.lineOpiton);
            // });
        },

        //表头样式
        headerCell({ row, column, rowIndex, columnIndex }) {
            return "header-cell";
        },

        rowCell({ row, column, rowIndex, columnIndex }) {
            if (rowIndex % 2 == 0) {
                return "row-cell";
            } else {
                return "row-cells";
            }
        },
        navClick(item) {
            this.clickIndex = item.type;
            if (item.type === 1) {
                this.$router.push("/homeIndex");
            } else if (item.type === 2) {
                this.$router.push("/inviteIndex");
            } else if (item.type === 3) {
                this.$router.push("/bambooIndex");
            } else if (item.type === 4) {
                this.$router.push("/activeAnalysis");
            } else if (item.type === 5) {
                this.$router.push("/behaviorAnalysis");
            } else if (item.type === 6) {
                this.$router.push("/answerAsk");
            }
        },

        //获取首页数据
        getIndex() {
            getScreenIndex().then((res) => {
                this.indexObj = res.data.data;
            });
        },

        //获取用户点击页面分析
        getPageClick() {
            let obj = {
                start_date: this.pickerTime[0],
                end_date: this.pickerTime[1],
            };
            getPageIndex(obj).then((res) => {
                let arr1 = [];
                let arr2 = [];
                let arr3 = [];
                res.data.data.forEach((val) => {
                    if (val.type == 1) {
                        if (val.m_id == 1) {
                            val.name = "问题库";
                        } else if (val.m_id == 2) {
                            val.name = "税收法规库";
                        } else if (val.m_id == 3) {
                            val.name = "会计法规库";
                        } else if (val.m_id == 4) {
                            val.name = "优惠政策";
                        } else if (val.m_id == 5) {
                            val.name = "模板专区";
                        } else if (val.m_id == 6) {
                            val.name = "发票助手";
                        } else if (val.m_id == 7) {
                            val.name = "小竹资讯";
                        } else if (val.m_id == 8) {
                            val.name = "小竹学院";
                        } else if (val.m_id == 9) {
                            val.name = "小竹企服";
                        } else {
                            val.name = "小竹问答";
                        }
                        arr1.push(val);
                    } else if (val.type == 2) {
                        val.num = val.sum_num;
                        if (val.m_id == 1) {
                            val.name = "问题库";
                        } else if (val.m_id == 2) {
                            val.name = "税收法规库";
                        } else if (val.m_id == 3) {
                            val.name = "会计法规库";
                        } else if (val.m_id == 4) {
                            val.name = "优惠政策";
                        } else if (val.m_id == 5) {
                            val.name = "模板专区";
                        } else if (val.m_id == 6) {
                            val.name = "发票助手";
                        } else if (val.m_id == 7) {
                            val.name = "小竹资讯";
                        } else if (val.m_id == 8) {
                            val.name = "小竹学院";
                        } else if (val.m_id == 9) {
                            val.name = "小竹企服";
                        } else {
                            val.name = "小竹问答";
                        }
                        arr2.push(val);
                    } else {
                        val.wechatNum = val.sum_num;
                        if (val.m_id == 1) {
                            val.name = "问题库";
                        } else if (val.m_id == 2) {
                            val.name = "税收法规库";
                        } else if (val.m_id == 3) {
                            val.name = "会计法规库";
                        } else if (val.m_id == 4) {
                            val.name = "优惠政策";
                        } else if (val.m_id == 5) {
                            val.name = "模板专区";
                        } else if (val.m_id == 6) {
                            val.name = "发票助手";
                        } else if (val.m_id == 7) {
                            val.name = "小竹资讯";
                        } else if (val.m_id == 8) {
                            val.name = "小竹学院";
                        } else if (val.m_id == 9) {
                            val.name = "小竹企服";
                        } else {
                            val.name = "小竹问答";
                        }
                        arr3.push(val);
                    }
                });
                let amounts = [];
                let amounts2 = [];
                let amounts3 = [];
                let names = [];
                const combined = arr1.reduce((acc, cur) => {
                    const target = acc.find((e) => e.m_id === cur.m_id);
                    if (target) {
                        Object.assign(target, cur);
                    } else {
                        acc.push(cur);
                    }
                    return acc;
                }, arr2);
                const combined2 = combined.reduce((acc, cur) => {
                    const target = acc.find((e) => e.m_id === cur.m_id);
                    if (target) {
                        Object.assign(target, cur);
                    } else {
                        acc.push(cur);
                    }
                    return acc;
                }, arr3);
                console.log(combined2);
                combined2.forEach((val) => {
                    amounts.push(val.sum_num);
                    amounts2.push(val.num);
                    amounts3.push(val.wechatNum);
                    names.push(val.name);
                });
                this.echartOption.xAxis[0].data = names;
                this.echartOption.series[0].data = amounts;
                this.echartOption.series[1].data = amounts2;
                this.echartOption.series[2].data = amounts3;
                this.$echarts
                    .init(document.getElementById("lineChart"))
                    .setOption(this.echartOption);
            });
        },

        //改变日期渲染数据
        changePicker(e) {
            let obj = {
                start_date: this.$moment(e[0]).format("YYYY-MM-DD"),
                end_date: this.$moment(e[1]).format("YYYY-MM-DD"),
            };
            getPageIndex(obj).then((res) => {
                let arr1 = [];
                let arr2 = [];
                res.data.data.forEach((val) => {
                    if (val.type == 1) {
                        if (val.m_id == 1) {
                            val.name = "问题库";
                        } else if (val.m_id == 2) {
                            val.name = "税收法规库";
                        } else if (val.m_id == 3) {
                            val.name = "会计法规库";
                        } else if (val.m_id == 4) {
                            val.name = "优惠政策";
                        } else if (val.m_id == 5) {
                            val.name = "模板专区";
                        } else if (val.m_id == 6) {
                            val.name = "发票助手";
                        } else if (val.m_id == 7) {
                            val.name = "小竹资讯";
                        } else if (val.m_id == 8) {
                            val.name = "小竹学院";
                        } else {
                            val.name = "小竹企服";
                        }
                        arr1.push(val);
                    } else {
                        val.num = val.sum_num;
                        if (val.m_id == 1) {
                            val.name = "问题库";
                        } else if (val.m_id == 2) {
                            val.name = "税收法规库";
                        } else if (val.m_id == 3) {
                            val.name = "会计法规库";
                        } else if (val.m_id == 4) {
                            val.name = "优惠政策";
                        } else if (val.m_id == 5) {
                            val.name = "模板专区";
                        } else if (val.m_id == 6) {
                            val.name = "发票助手";
                        } else if (val.m_id == 7) {
                            val.name = "小竹资讯";
                        } else if (val.m_id == 8) {
                            val.name = "小竹学院";
                        } else {
                            val.name = "小竹企服";
                        }
                        arr2.push(val);
                    }
                });
                let amounts = [];
                let amounts2 = [];
                let names = [];
                const combined = arr1.reduce((acc, cur) => {
                    const target = acc.find((e) => e.m_id === cur.m_id);
                    if (target) {
                        Object.assign(target, cur);
                    } else {
                        acc.push(cur);
                    }
                    return acc;
                }, arr2);
                combined.forEach((val) => {
                    amounts.push(val.sum_num);
                    amounts2.push(val.num);
                    names.push(val.name);
                });
                this.echartOption.yAxis[0].data = names;
                this.echartOption.series[0].data = amounts;
                this.echartOption.series[1].data = amounts2;
                this.$echarts
                    .init(document.getElementById("lineChart"))
                    .setOption(this.echartOption);
            });
        },
        getMap() {
            province_summary({
                pagesize: 100,
            }).then((res) => {
                let arr = [];
                let arr2 = [];
                this.mapData = res.data.data;
                for (let val of this.mapData) {
                    if (val.province) {
                        val.name = val.province;
                        val.province = val.province.replace(
                            /省|市|自治区/g,
                            ""
                        );
                        let obj = {
                            name: val.province,
                            value: val.all_delivery,
                            value2: val.all_lottery,
                            value3: val.lottery_ratio,
                        };
                        arr2.push(obj.name);
                        arr.push(obj);
                    }
                }

                let diff = this.provinciaList2.filter(
                    (item) => !arr2.includes(item)
                );
                for (let item of diff) {
                    arr.push({
                        name: item,
                        value: 0,
                        value2: 0,
                        value3: "0%",
                    });
                }
                console.log("城市格式1", arr);
                arr.push({
                    name: "南海诸岛",
                    value: 0,
                    value2: 0,
                    value3: 0,
                    eventTotal: 100,
                    specialImportant: 10,
                    import: 10,
                    compare: 10,
                    common: 40,
                    specail: 20,
                });
                this.topData = arr;
                this.initEchartMap();

                this.$nextTick(() => {
                    this.getCount();
                });
            });
        },

        getWebSocket() {
            this.$goeasy.connect({
                onSuccess: function () {
                    //连接成功
                    console.log("GoEasy connect successfully."); //连接成功
                },
                onFailed: function (error) {
                    //连接失败
                    console.log(
                        "Failed to connect GoEasy, code:" +
                            error.code +
                            ",error:" +
                            error.content
                    );
                },
                onProgress: function (attempts) {
                    //连接或自动重连中
                    console.log("GoEasy is connecting", attempts);
                },
            });
            let pubsub = this.$goeasy.pubsub;
            let _that = this;
            pubsub.subscribe({
                channel: "screen_channel", //替换为您自己的channel
                onMessage: function (message) {
                    console.log("是否能从服务端主动接收到消息");
                    _that.getMap();
                    _that.getIndex();
                    _that.getPageClick();
                    _that.scrollView = !_that.scrollView;
                },
                onSuccess: function () {
                    console.log("Channel订阅成功。");
                },
                onFailed: function (error) {
                    console.log(
                        "Channel订阅失败, 错误编码：" +
                            error.code +
                            " 错误信息：" +
                            error.content
                    );
                },
            });
        },
    },
};
</script>

<style lang="scss">
@import "@/styles/home.scss";
@import "@/styles/common.scss";
.home-content{
}
.el-table,
.el-table__expanded-cell {
    background-color: #081832 !important;
}
.el-table th,
.el-table tr {
    background-color: #081832 !important;
}

.el-table--scrollable-y .el-table__body-wrapper {
    /* 滚动条宽度 */
    &::-webkit-scrollbar {
        width: 3px;
    }

    /* 滚动条轨道 */
    &::-webkit-scrollbar-track {
        background: #081832;
    }

    /* 滚动条滑块 */
    &::-webkit-scrollbar-thumb {
        background: #fff;
    }

    /* 滚动条滑块:hover */
    &::-webkit-scrollbar-thumb:hover {
        background: #ccc;
    }
}

.el-table thead {
    color: #fff !important;
}
.el-table {
    color: #fff !important;
}
.header-cell {
    color: #61d2f7 !important;
    font-size: 14px;
    font-weight: 600;
    height: 48px;
    background-color: #072951 !important;
    box-shadow: -10px 0px 15px #034c6a inset, 10px 0px 15px #034c6a inset;
}

.row-cell {
    color: #fff !important;
    background-color: #072951 !important;
}
.row-cells {
    color: #fff !important;
    background-color: #072951 !important;
    box-shadow: -10px 0px 15px #034c6a inset, 10px 0px 15px #034c6a inset;
}

.table-header {
    color: #fff;
    width: 95%;
    margin-left: 2.5%;
    text-align: center;
    padding-top: 20px;
    font-size: 15px;
    padding-bottom: 14px;
    border-bottom: 1px solid #70b4eb;
}

.sheng-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .jxs-list {
        height: 410px;
        width: 480px;
        overflow: auto;
        position: relative;
        padding-top: 10px;
        .title {
            color: #fff;
            position: absolute;
            top: -4px;
            left: 0;
            z-index: 1;
            cursor: pointer;
        }
    }
}
</style> 
